<template>
  <div class="ruzhu">
    <div class="slot">
      <div class="top">
        <div class="return" @click="goback">
          <img src="@/assets/my/zuo.png" alt />
        </div>
        <span>入驻申请</span>
      </div>
    </div>
    <div class="main1" v-if="istishi">
      <div class="tishi1"></div>
      <div class="tishi">
        <div class="span">请正确填写以下入驻申请信息</div>
        <div class="img" @click="handelguanbi">
          <img src="@/assets/my/guanbi.png" alt />
        </div>
      </div>
    </div>
    <form class="form">
      <div class="list cd_borber">
        <span>联系人</span>
        <!-- <input type="text"> -->
        <input
          class="input"
          placeholder="请输入真实姓名"
          type="text"
          v-model="forminfo.truename"
          name="Username"
        />
      </div>
      <div class="list cd_borber">
        <span>联系电话</span>
        <input
          class="input"
          maxlength="11"
          placeholder="请输入联系电话"
          type="tel"
          v-model="forminfo.phone"
          name="Usernumber"
        />
      </div>
      <div class="list cd_borber cd_margin">
        <span>商家名称</span>
        <input
          class="input"
          placeholder="请输入真实名称"
          type="text"
          v-model="forminfo.name"
          name="Usershop"
        />
      </div>
      <div class="list cd_borber">
        <span class="span">所在地区</span>
        <div class="ress">
          <input type="text" name id :value="valueArea" placeholder="请选择所在地区" @click="bindShow" />
          <div class="jiantou">
            <img src="@/assets/pblic/right.png" alt />
          </div>
        </div>
      </div>
      <div class="list cd_borber">
        <span>详细地址</span>
        <textarea
          class="input cd_input"
          placeholder="街道、楼牌号等"
          type="text"
          v-model="forminfo.detail"
          name="Usermoresite"
        />
      </div>
      <div class="list cd_borber cd_margin">
        <span>上级编码</span>
        <input
          class="input"
          v-model="forminfo.sign"
          placeholder="请输入有效编码"
          type="text"
          name="Usercode"
        />
      </div>
      <div class="list cd_borber">
        <span>营业执照</span>
        <div class="zhizhao">
          <div class="chack" @click="clickpermit1">
            <img v-if="forminfo.is_license==1" src="@/assets/my/you.png" alt />
            <img v-if="forminfo.is_license!=1" src="@/assets/my/wu.png" alt />
            <span>有</span>
          </div>
          <div class="chack" @click="clickpermit2">
            <img v-if="forminfo.is_license==0" src="@/assets/my/you.png" alt />
            <img v-if="forminfo.is_license!=0" src="@/assets/my/wu.png" alt />
            <span>无</span>
          </div>
        </div>
      </div>
      <!-- <div class="list1">
        <div class="span">加盟产品</div>
        <div class="list1_btn">
          <div
            class="weixuan"
            :id="item.id"
            v-for="item in getList"
            :key="item.id"
            @click="jiamenshop"
          >{{item.title}}</div>
        </div>
      </div> -->
      <div class="tijiao_btn">
        <div class="btn" @click="submit">提交申请</div>
      </div>
    </form>
    <van-popup
      v-model="showArea"
      position="bottom"
      :style="{ height: '10rem', borderRadius: '20px 20px 0px 0px' }"
    >
      <div class="dizhi">
        <div class="dizhi_top">
          <div class="chack">请选择</div>
          <div class="guanbi" @click="bindCancel">
            <img src="@/assets/pblic/guanbi.png" alt />
          </div>
        </div>
        <div class="dizhiinfo">
          <div :class="type==1?'li1':'li'" >{{forminfo.province}}</div>
          <div :class="type==2?'li1':'li'" >{{forminfo.city}}</div>
          <div :class="type==3?'li1':'li'" class="li" >{{forminfo.area}}</div>
        </div>
        <div class="dizhimain">
          <div
            class="list"
            v-for="item in dizhilist"
            :key="item.id"
            @click="changeid(item.id,item.district_name,item.type)"
          >
            <div class="img" v-if="id==item.id">
              <img src="@/assets/pblic/hgou.png" alt />
            </div>
            <div>{{item.district_name}}</div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      istishi: true, //显示提示
      ispermit: true, // 有无执照
      id: 1,
      type: 1,
      dizhilist: [],
      showArea: false,
      valueArea: "", //地区值
      arrArea: [],
      forminfo: {
        name: "",
        truename: "",
        phone: "",
        province: "请选择",
        city: "请选择",
        area: "请选择",
        detail: "",
        is_license: 0,
        sign: "",
        classigy_id: [],
        district_sqe: [],
        token: "",
      },
      // getList: [],
      userinfo:{}
      // classigy_id: [],
    };
  },
  mounted() {
    this.token = window.localStorage.getItem("token");
    if (!window.localStorage.getItem("token")) {
      this.$router.push("/home");
    } else {
      this.gethttp();
    }
    // axios.post("/index/goods/classify").then((res) => {
    //   if (res.data.code === 1) {
    //     console.log(res.data.data);
    //     this.getList = res.data.data;
    //   } else {
    //     this.$toast(res.data.msg);
    //   }
    // });
    axios
      .post("/index/user/info", this.$qs.stringify({
        token: this.token,
      }))
      .then((res) => {
        console.log(res.data.data, 12121212);
        this.userinfo = res.data.data.user;
        // this.settle_in = res.data.data.user.store.status;
      });
  },
  methods: {
    goback() {
      this.$router.back();
    },
    handelguanbi() {
      this.istishi = false;
    },
    clickpermit1() {
      this.forminfo.is_license = 1;
    },
    clickpermit2() {
      this.forminfo.is_license = 0;
    },
    // jiamenshop(event) {
    //   if (event.target.className == "weixuan") {
    //     event.target.className = "xuan";
    //   } else {
    //     event.target.className = "weixuan";
    //   }
    // },
    bindShow() {
      this.id = 1;
      this.showArea = true;
      this.xuanqusheng()
    },
    bindCancel() {
      this.showArea = false;
    },
    xuanqusheng() {
      this.id = 1;
      this.type = 1;
      this.forminfo.district_sqe = [];
      this.gethttp();
    },
    xuanqushi() {
      this.type = 2;
      this.gethttp();
    },
    xuanququ() {
      this.type = 3;
      this.gethttp();
    },
    ismoren() {
      if (this.forminfo.is_default == 1) {
        this.forminfo.is_default = 0;
      } else {
        this.forminfo.is_default = 1;
      }
    },
    gethttp() {
      axios
        .post("/index/user/address_linkage", this.$qs.stringify({
          token: this.token,
          id: this.id,
        }))
        .then((res) => {
          if (res.data.code == 1) {
            this.dizhilist = res.data.data;
          } else {
            this.$toast(res.data.msg);
          }
        });
    },
    changeid(id, name, type) {
      this.id = id;
      if (type == 1) {
        this.forminfo.province = name;
        this.forminfo.district_sqe[0] = id;
        this.xuanqushi()
      } else if (type == 2) {
        this.forminfo.city = name;
        this.forminfo.district_sqe[1] = id;
        this.xuanququ()
      } else {
        this.forminfo.area = name;
        this.forminfo.district_sqe[2] = id;
        this.valueArea =
          this.forminfo.province +
          "、" +
          this.forminfo.city +
          "、" +
          this.forminfo.area;
        this.showArea = false;
      }
    },
    submit() {
      var arr = document.getElementsByClassName("xuan");
      var id = [];
      for (var j = 0; j < arr.length; j++) {
        id.push(parseInt(arr[j].id));
      }
      if(this.forminfo.province==="请选择" || this.forminfo.city==="请选择" || this.forminfo.area==="请选择"){
        this.$toast("请选择所在地区");
        return
      }
      if(this.forminfo.phone==''){
        this.$toast("请输入电话号码");
        return
      }
      axios
        .post("/index/store/add", this.$qs.stringify({
          token: this.token,
          name: this.forminfo.name,
          truename: this.forminfo.truename,
          phone: this.forminfo.phone,
          province: this.forminfo.province,
          city: this.forminfo.city,
          area: this.forminfo.area,
          detail: this.forminfo.detail,
          is_license: this.forminfo.is_license,
          sign: this.forminfo.sign,
          // classify_id: id.join(","),
          district_sqe: this.forminfo.district_sqe.toString(),
        }))
        .then((res) => {
          console.log(res.data, 1111);
          if (res.data.code == 1) {
            this.$toast(res.data.msg);
            this.$router.push({
              path: "/home",
            });
          } else {
            this.$toast(res.data.msg);
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.ruzhu {
  width: 100%;
  height: 100%;
  .slot {
    width: 100%;
    height: 44px;
    .top {
      width: 100%;
      height: 44px;
      display: flex;display: -webkit-flex;
      justify-content: center;
      align-items: center;
      background: white;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9;
      .return {
        width: 38px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;display: -webkit-flex;
        justify-content: center;
        align-items: center;
        img {
          width: 8px;
          height: 15px;
        }
      }
      span {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #000000;
        line-height: 44px;
      }
    }
  }
  .main1 {
    width: 100%;
    height: 31px;
    position: relative;
    .tishi1 {
      width: 345px;
      height: 31px;
      background: #4b78fa;
      opacity: 0.1;
      border-radius: 5px;
      margin: auto;
    }
    .tishi {
      width: 345px;
      height: 31px;
      position: absolute;
      top: 0;
      left: 15px;
      display: flex;display: -webkit-flex;
      justify-content: space-between;
      align-items: center;
      .span {
        height: 100%;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #4b78fa;
        line-height: 31px;
        margin-left: 10px;
      }
      .img {
        width: 32px;
        height: 100%;
        display: flex;display: -webkit-flex;
        justify-content: center;
        align-items: center;
        img {
          width: 11.5px;
          height: 11.5px;
        }
      }
    }
  }
  .form {
    width: 100%;
    height: 100%;
    background: #f8f8f8;
    .cd_borber {
      border-bottom: 1px solid #d8d8d8;
    }
    .cd_margin {
      margin-top: 8px;
    }
    .list {
      width: 100%;
      display: flex;display: -webkit-flex;
      background: white;
      span {
        width: 80px;
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #222222;
        line-height: 50px;
        margin-left: 15px;
      }
      .ress {
        width: 250px;
        height: 100%;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 28px;
        display: flex;display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
        input {
          border: none;
        }
        .span1 {
          margin-left: 0;
        }
        .jiantou {
          img {
            width: 7px;
            height: 12px;
          }
        }
      }
      .input {
        width: 250px;
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #222222;
        border: none;
        line-height: 50px;
        margin: 1px 0;
      }
      .cd_input {
        height: 50px;
        line-height: 20px;
        margin-top: 15px;
      }
      .zhizhao {
        display: flex;display: -webkit-flex;
        align-items: center;
        .chack {
          width: 80px;
          display: flex;display: -webkit-flex;
          align-items: center;
          img {
            width: 20px;
            height: 20px;
          }
          span {
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #939393;
            margin-left: 5px;
          }
        }
      }
      .jiantou {
        height: 50px;
        display: flex;display: -webkit-flex;
        align-items: center;
      }
    }
    .list1 {
      width: 100%;
      background: white;
      margin-bottom: 65px;
      .span {
        margin-left: 15px;
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #222222;
        line-height: 50px;
      }
      .list1_btn {
        width: 100%;
        background: white;
        display: flex;display: -webkit-flex;
        justify-content: space-around;
        align-items: center;
        padding-bottom: 25px;
        .weixuan {
          width: 90px;
          height: 33px;
          background: #f1f1f1;
          border-radius: 16.5px;
          font-size: 15px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #444444;
          text-align: center;
          line-height: 33px;
        }
        .xuan {
          width: 90px;
          height: 33px;
          background: #fdd40a;
          border-radius: 16.5px;
          font-size: 15px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #000000;
          text-align: center;
          line-height: 33px;
        }
      }
    }
    .tijiao_btn {
      width: 100%;
      height: 65px;
      background: white;
      display: flex;display: -webkit-flex;
      justify-content: center;
      align-items: center;
      margin-top: 25px;
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 6;
      .btn {
        width: 225px;
        height: 42px;
        background: #fdd40a;
        border-radius: 21px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #222222;
        line-height: 42px;
        text-align: center;
        border: none;
      }
      .btn1{
        width: 225px;
        height: 42px;
        background: #fdd40a;
        opacity: 0.4;
        border-radius: 21px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #222222;
        line-height: 42px;
        text-align: center;
        border: none;
      }
    }
  }
}
.dizhi {
  width: 100%;
  height: 475px;
  background: #ffffff;
  border-radius: 10px 10px 0px 0px;
  .dizhi_top {
    width: 100%;
    display: flex;display: -webkit-flex;
    justify-content: space-between;
    .chack {
      font-size: 17px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
      line-height: 17px;
      margin-left: 20px;
      margin-top: 18px;
    }
    .guanbi {
      width: 19px;
      height: 19px;
      padding: 5px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .dizhiinfo {
    display: flex;display: -webkit-flex;
    margin-top: 32px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
    line-height: 26px;
    .li {
      margin-left: 25px;
    }
    .li1 {
      margin-left: 25px;
      border-bottom: 2px solid #fdd40a;
    }
  }
  .dizhimain {
    width: 100%;
    height: 375px;
    overflow-x: hidden;
    overflow-y: auto;
    .list {
      width: 100%;
      height: 40px;
      margin-left: 20px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 40px;
      color: #000000;
      display: flex;display: -webkit-flex;
      align-items: center;
      .img {
        width: 15px;
        height: 15px;
        margin-right: 10px;
        display: flex;display: -webkit-flex;
        justify-content: center;
        align-items: center;
        img {
          width: 15px;
          height: 15px;
        }
      }
    }
  }
}
</style>